import React, {useEffect} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
      width: '25ch',
    },
  },
}));



export default function Input(props) {
  const classes = useStyles();

  const onChange = () => {
  let inputElement = document.getElementById(props.id);
  let string = inputElement.value;
  string = string.replaceAll(/\s/g, "");
  string = string.replaceAll(/\d{3}/g, "");
  string = string.replaceAll(/\s\s/g, " ");
  string = string.replaceAll(/\s,/g, ",");
  string = string.replaceAll(/,,/g, ",");
  string = string.replaceAll(/[^0-9,\s]/g, "");
  inputElement.value = string;

}
  return (
    // <form className={classes.root} noValidate autoComplete="off">
    //   <TextField id="standard-basic" label="Standard" />
    //   <TextField id="filled-basic" label="Filled" variant="filled" />

      <TextField id={props.id} label={props.label} variant="standard"
                 InputLabelProps={{ shrink: true }} placeholder={"example:1,2,3,4,5"}
                 onChange={onChange}
      >
      </TextField>
    // </form>
  );
}
